<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<%@ include file="/commons/meta.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>初学者论坛，课程发布</title>
	<script src="${ctx}/jcrop/js/jquery.min.js"></script>
	<script src="${ctx}/jcrop/js/jquery.Jcrop.js"></script>
	<script type="text/javascript">
	  jQuery(function($){
	    var jcrop_api;
	    $('#target').Jcrop({
	      setSelect: [ 10, 10, 200, 200 ],
          aspectRatio: 1,
	      onChange:   showCoords,
	      onSelect:   showCoords,
	      onRelease:  clearCoords,
	    },function(){
	      jcrop_api = this;
	    });
	
	    $('#coords').on('change','input',function(e){
	      var x1 = $('#x1').val(),
	          x2 = $('#x2').val(),
	          y1 = $('#y1').val(),
	          y2 = $('#y2').val();
	      jcrop_api.setSelect([x1,y1,x2,y2]);
	    });
	
	    $('#cutImge').on('click',function(){
	    	var imgSrc = $('#target').attr('src');
	    	$('#iconName').val(imgSrc.substr(imgSrc.lastIndexOf('/')+1));
	    	$('#coords').submit();
	    });
	    
	    $('#upload').on('click',function(){
	    	$('#fileupload').submit();
	    });
	    
	    $('#filebrowser').on('change',function(){
	    	var fileName = $('#filebrowser').val();
	    	var formatName = fileName.substr(fileName.lastIndexOf('.')+1);
	    	if(formatName == "jpg" || formatName == "png"){
				$('#upload').attr('disabled',false);
				$('#cutImge').attr('disabled',false);
	    	} else {
				alert("仅支持png和jpg两种格式");
				$('#upload').attr('disabled',true);
				$('#cutImge').attr('disabled',true);
	    		return false;
	    	}
	    });
	  });
	
	  // Simple event handler, called from onChange and onSelect
	  // event handlers, as per the Jcrop invocation above
	  function showCoords(c)
	  {
	    $('#x1').val(c.x);
	    $('#y1').val(c.y);
	    $('#x2').val(c.x2);
	    $('#y2').val(c.y2);
	    $('#w').val(c.w);
	    $('#h').val(c.h);
	  };
	
	  function clearCoords()
	  {
	    $('#coords input').val('');
	  };
	</script>
	<link rel="stylesheet" href="${ctx}/jcrop/css/jquery.Jcrop.css" type="text/css" />
	<link rel="stylesheet" href="${ctx}/css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="${ctx}/css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="${ctx}/fileupload/css/style.css">
	<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
	<link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload.css">
	<link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload-ui.css">
	<!-- CSS adjustments for browsers with JavaScript disabled -->
	<noscript><link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload-noscript.css"></noscript>
	<noscript><link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload-ui-noscript.css"></noscript>
	</head>
	<body>
	    <div class="container">
	        <!-- The file upload form used as target for the file upload widget -->
	        <form id="fileupload" action="${ ctx}/user/uploadImage" method="POST" enctype="multipart/form-data">
	            <div class="row fileupload-buttonbar">
	                <div class="col-lg-7">
	                    <!-- The fileinput-button span is used to style the file input field as button -->
	                    <span class="btn btn-success fileinput-button">
	                        <i class="glyphicon glyphicon-plus"></i>
	                        <span>添加文件...</span>
	                        <input type="file" id="filebrowser" name="files[]" >
	                    </span>
	                    <button type="button" id="upload" class="btn btn-primary start">
	                        <i class="glyphicon glyphicon-upload"></i>
	                        <span>开始上传</span>
	                    </button>
						<button type="button" id="cutImge" class="btn btn-primary start">
	                        <i class="glyphicon glyphicon-upload"></i>
	                        <span>保存选中区域</span>
	                    </button>
	                    <!-- The global file processing state -->
	                    <span class="fileupload-process"></span>
	                </div>
	                <!-- The global progress state -->
	                <div class="col-lg-5 fileupload-progress fade">
	                    <!-- The global progress bar -->
	                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
	                        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
	                    </div>
	                    <!-- The extended global progress state -->
	                    <div class="progress-extended">&nbsp;</div>
	                </div>
	            </div>
	            <!-- The table listing the files available for upload/download -->
	            <table role="presentation" class="table table-striped">
	                <tbody class="files"></tbody>
	            </table>
	        </form>
	    </div>
	    <div class="container">
	        <div class="row">
	            <div class="span12">
	                <div class="jc-demo-box">
	                    <img src="${ctx }/icontemppath/myIcon_53.jpg" id="target" alt="[Jcrop Example]" width="700"/>
	                    <!-- This is the form that our event handler fills -->
	                    <form id="coords" class="coords" method="post" action="${ctx }/user/cutImage">
	                        <div class="inline-labels">
	                            <label><input type="hidden" size="4" id="x1" name="x1" /></label>
	                            <label><input type="hidden" size="4" id="y1" name="y1" /></label>
	                            <label><input type="hidden" size="4" id="w" name="w" /></label>
	                            <label><input type="hidden" size="4" id="h" name="h" /></label>
	                            <label><input type="hidden" id="iconName" name="iconName" /></label>
	                        </div>
	                    </form>
	                </div>
	            </div>
	        </div>
	    </div>
	</body>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
	<script src="${ctx }/fileupload/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload.js"></script>
	<!-- The File Upload processing plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload-process.js"></script>
	<!-- The File Upload image preview & resize plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload-image.js"></script>
	<!-- The File Upload audio preview plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload-audio.js"></script>
	<!-- The File Upload video preview plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload-video.js"></script>
	<!-- The File Upload validation plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload-validate.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="${ctx }/fileupload/js/jquery.fileupload-ui.js"></script>
	<!-- The main application script -->
<%-- 	<script src="${ctx }/fileupload/js/main.js"></script> --%>
	<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
	<!--[if (gte IE 8)&(lt IE 10)]>
	<script src="js/cors/jquery.xdr-transport.js"></script>
	<![endif]-->
</html>